import * as React from "react"
import { View, ViewStyle, Text, TextStyle, TouchableWithoutFeedback } from "react-native"
import { ElementsIcon as Icon } from "../elements-icon"
import { px2dp } from "../../utils"

export interface RadioGroupProps {
  style?: any
  inline?: boolean
}

export interface RadioGroupState {
  active: number
}

const styledRadioGroupInline: ViewStyle = {
  flexDirection: "row"
}
const styledRadioGroup: ViewStyle = {}

const styledRadioGroupItem: ViewStyle = {
  flexDirection: "row",
  alignItems: "center"
}

const styledRadioText: TextStyle = {
  marginLeft: px2dp(7)
}
/**
 * Stateless functional component for your needs
 *
 * Component description here for TypeScript tips.
 */
export class RadioGroup extends React.Component<RadioGroupProps, RadioGroupState> {
  // grab the props

  state = {
    active: 0,
    listItem: ["男", "女"]
  }

  private chooseItem(index: number) {
    this.setState({
      active: index
    })
  }

  render() {
    return (
      <View style={this.props.inline ? styledRadioGroupInline : styledRadioGroup}>
        {this.state.listItem.map((item, index) => (
          <TouchableWithoutFeedback key={index} onPress={() => this.chooseItem(index)}>
            <View style={[styledRadioGroupItem, this.props.style]}>
              {index === this.state.active ? (
                <Icon name={"check-box"} />
              ) : (
                <Icon name={"check-box-outline-blank"} />
              )}
              <Text style={styledRadioText}>{item}</Text>
            </View>
          </TouchableWithoutFeedback>
        ))}
      </View>
    )
  }
}
